[body]
	<style>
	  #log_add_form{
			clear:both;
			padding-left:100px;
			position:relative;
		}
	  #log_add_form .item{
	    display:block;
	    float:left;
	    width:100px;
	    position:relative;
	    padding-top:40px;
	    line-height:16px;
		}
		#log_add_form .item label{
		  display:block;
			text-align:left;
			font-weight:bold;
			font-size:16px;
			padding:0 0 20px 0;
			position:absolute;
			left:0; top:0;
		}
		#log_add_form .item input{
		  width:28px;
		}
		#log_add_form hr{
		  margin:20px 0;
		}
		.submit_block{
		  padding-top:40px;
		}
		#log_add_form .item .err_err{
		  display:block;
		  color:#dd0000;
		}
		
		#log_list{
		  margin-top:20px;
		}
		#log_list .item.date{
		  width:100px;
		}
		#log_list .item{
	    width:100px; float:left;
		}
		#log_list .item div{
		  display:block;
		  float:left;
		}
		#log_list .item div{
		  width:30px;
		  text-align:center;
		  font-weight:bold;
		  font-size:16px;
		}
		#log_list .group{
		  margin:20px 0 10px;
		  font-family:Hermes;
		  font-size:18px;
		}
		#log_list .sep{
		  margin-top:5px;
		  padding-top:5px;
		  border-top:1px dotted #e4e4e4;
		  clear:both;
		  display:block;
			width:100%;
		}
		#allCarts{
			color: #000;
	    font-weight: bold;
	    left: 0;
	    position: absolute;
	    text-align: center;
	    top: 0;
	    width: 70px;
		}
	</style>
	<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
	<script type="text/javascript" src="/js/plugins/jqplot.dateAxisRenderer.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/jquery.jqplot.css" />
	<script>
	  function buildPoints(byNum){
			//Перебираю Точки
      var points=[];
      var i=0, dateCur=false;

      $('#log_list > div:not(.sep)').each(function(){
        if( $(this).hasClass('date') ){
					var t=$(this).text().match(/\d{2}\.\d{2}\.\d{4}/);
					//console.log(t);
					dateCur=t[0];
					var t=dateCur.split('.');
					dateCur=t[2]+'-'+t[1]+'-'+t[0]+'  8:00AM';
					i=0;
				}else{
				  if( typeof(byNum)!='undefined' ){
				    if(i!=byNum){ i++; return; }
				    if(!points[0]) points[0]=[];
						points[0].push([dateCur, parseFloat($('div',this).text()) ])
					}else{
					  if(!points[i]) points[i]=[];
				  	points[i].push([dateCur, parseFloat($('div',this).text()) ])
					}
				  i++;
				}
			});
			
			return points;
		}
		
		var jqpObj=false;
		function jqPlotGen(name,points,opts){
		  if(typeof(points)=='undefined') points=pointsDef;
		  if(typeof(opts)=='undefined') opts=optsDef;
		  
		  if(jqpObj) $('#chartdiv').empty();
		  
		  opts.axes={
			        xaxis:{
			          renderer:$.jqplot.DateAxisRenderer
			        }
				    };
		
			jqpObj=$.jqplot('chartdiv',points,opts);
		}
		
	  var pointsDef=[],optsDef={};
	  $(document).ready(function(){
	    var colors=[
	      'rgba(255,200,0,1)',//orange
	      'rgba(60,67,210,1)',//blue
	      'rgba(210,67,60,1)',//red
	      'rgba(150,150,0,1)',//green
	      'rgba(0,150,150,1)',//green
	      'rgba(204,0,255,1)',
	      'rgba(255,0,153)',
       	'rgba(51,153,102)',
	      'rgba(0,0,0,1)',//black
			];
			
	    //Перебираю head получаю набор тайтлов
	    var labels=[],seriesVal=[];
	    $('#log_add_form .item label').each(function(i){
	      labels.push({name: $(this).text() });
	      seriesVal.push({
	                color: colors[i],
	                showMarker: true,
	                markerOptions: {
	                    style: 'filledCircle',
	                    size: 8
	                },
	                rendererOptions: {
	                    smooth: true
	                }
	            });
        $(this).css({'color':colors[i],'cursor':'pointer'}).click(function(){
          var points=buildPoints(i);
          seriesVal[0].color=colors[i];
          jqPlotGen('chartdiv',points,{	series:seriesVal	});
          if( $('#allCarts').get().length<1 )
          	$('#log_add_form').append('<a href="#" id="allCarts" onclick="jqPlotGen(\'chartdiv\'); $(this).remove();  return false;">Display all</a>');
				});
			});
			
      pointsDef=buildPoints();
      optsDef={	series:seriesVal	};
	    jqPlotGen('chartdiv',pointsDef,optsDef);
		});
	</script>

	<h2>Your <span>self-monitoring variables</span>.</h2>
	<p>
		Do measure those on the weekly basis and upload for your convenience.
	</p>
  <div id="chartdiv" style="height:200px;width:100%;"></div>
  <p style="padding:30px 0 0 100px; color:#555; font-style:italic;">
		You can click on each title to see a separate log-chart.
  </p>
	<form id="log_add_form" method="POST">
		{body}
		<div class="submit_block">
  		<input type="submit" class="submit button orange" value="Add">
  	</div>
	</form>
	<div id="log_list">{log_body}</div>
[item]
	<div class="item" >
	  <label for="fld_{ult_id}">{ult_name}</label>
	  <input type="text" name="fld_{ult_id}" id="fld_{ult_id}" stype="number">
	  <span>{ult_dim}</span>
	  <!--err:fld_{ult_id}-->
	</div>
[log_line]
	<div class="item date">
	  {date}
	</div>
	{body}
[log_line_item]
	<div class="item">
		<div>{ul_value}</div>
		<span>{ult_dim}</span>
	</div>
[log_line_item_empty]
  <div class="item">
		&nbsp;
	</div>
[log_line_sep]
	<div class="sep"></div>